<script setup>
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
console.log('初始化------setUp');

onBeforeMount(()=>{
  console.log('挂载之前------onBeforeMount'); 
})

onMounted(()=>{
  console.log('挂载之后------onMounted'); 
})

onBeforeUpdate(()=>{
  console.log('更新之前------onBeforeUpdate'); 
})

onUpdated(()=>{
  console.log('更新之后------onUpdated'); 
})

onBeforeUnmount(()=>{
  console.log('销毁之前------onBeforeUnmount'); 
})

onUnmounted(()=>{
  console.log('销毁之后------onUnmounted'); 
})
const age = ref(18)
const changeAge = () => age.value++
</script>
       
<template>
 <div>
    {{ age }}
    <button @click="changeAge">修改年龄</button>
 </div>
</template>
       
<style scoped>
       
</style>